<template>
<view >
	<scroll-view class="list-scroll" scroll-y @scrolltolower='handleScrollBottomGetMoreListInfo'>
		<view class="order-list" v-for="(order,index) in order_list" v-for-item="order" wx:key='index' @tap="handleClickToOrderDetailPage" :data-id="order.order_id">
		    <navigator  hover-class="none">
		      <!-- 订单号及状态 -->
		      <view class="order-title flex-between">
		        <view class="order-title-text flex">
		          <image :src="IMG_URL+'order-icon.png'" mode='widthFix'></image>
		          <text>预算编号：{{order.order_no}}</text>
		        </view>
		        <!-- <view class="order-title-status" wx:if="{{navNum==1}}">待支付</view> -->
		         <view class="order-title-status" v-if="navNum==1">待实施</view> 
		        <view class="order-title-status" v-else-if="navNum==2">待发货</view>
		        <view class="order-title-status" v-else-if="navNum==3">待收货</view>
		        <view class="order-title-status" v-else-if="navNum==4">待评价</view>
		        <view class="order-title-status" v-else-if="navNum==5">售后</view>
		      </view>
		
		      <!-- 商品列表 -->
		      <view class="goods-list flex-between" v-for='(goods,index) in order.goods_list' v-key='index' v-for-item="goods">
		        <view class="goods-image flex-center">
		          <image :src='goods.goods_pic' mode='aspectFit'></image>
		        </view>
		        <view class="goods-detail col-between">
		          <view class="goods-name text-sl">{{goods.goods_name}}</view>
		          <view class="goods-price flex-between">
		            <view class="goods-price-text" v-for="(attr,index) in goods.attr_list" v-for-item="attr">{{attr.attr_group_name}}: {{attr.attr_name}}</view>
		            <view class="goods-price-num">
		              <text>￥</text>
		              <text>{{goods.price}}</text>
		            </view>
		          </view>
		        </view>
		      </view>
		    </navigator>
			<view class="order-total flex-end">
				 <view v-if='navNum==1||navNum==2'>
					 <view v-if="order.is_send==0">
						  <view class="order-btn" v-if="order.apply_delete==1" :data-id="item.id">
						 取消申请中
						  </view>
							<view class="order-btn" @click.stop="orderRevoke" :data-id="order.order_id" v-else>
						 取消预算
						  </view>
					 </view>
				 </view>
			</view>
		</view>
		
		  <no-data v-if="show_no_data_tip"></no-data>
	</scroll-view>
	
	
	
	
</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	var t = require("@/api.js"), a = !1, o = !1,s=2,me = require("@/utils/method.js");
	var e= getApp(),ea=getApp();
	export default {
		data(){
			return{
				IMG_URL:'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/',
				navNum: 1, //当前选中的导航栏
				showPayWayModal: false, //是否显示支付方式弹窗
				payWay: 0, //当前支付方式 1为微信支付，2为余额支付
				/*后端所需参数 */
				goodsList: [{
				  id: 1,
				  text: '蒂佳婷药丸面膜蓝色胶囊绿色舒缓滋润保湿补水面膜蒂佳婷药丸面膜蓝色胶囊绿色',
				  img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-list1.png'
				}, {
				  id: 2,
				  text: '韩国OSE澳皙可五色黄土面膜吸附清洁',
				  img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-list2.png'
				}], //商品列表
				/*后端需要用到的参数 */
				status: -1,
				order_list: [],
				show_no_data_tip: !1,
				hide: 1,
				qrcode: "",
				order_id:"",
				page:1,
				limit:5,
				row_count:0
			}
		},
		onLoad:function(){
			let navNum = t.navNum
			this.navNum=navNum;
			var n = this;
			a = !1, o = !1, s = 2, n.loadOrderList(t.status || -1), getCurrentPages().length < 2;
			 n.show_index= !0
			;
		},
		methods:{
			/*取消订单*/
			orderRevoke: function (a) {
				  var arr = this.main_getGlobal(); 
				  console.log('arr',arr);
			    var o = this;
			    uni.showModal({
			      title: "提示",
			      content: "是否取消该预算？",
			      cancelText: "否",
			      confirmText: "是",
			      success: function (s) {
					
			        if (s.cancel) return !0;
			        s.confirm && (uni.showLoading({
			          title: "操作中"
			        }), uni.request({
			          url: t.order.revoke,
			          data: {
			            order_id: a.currentTarget.dataset.id,
						mobile:arr.token,
						type:arr.type
			          },
			          success: function (ta) {
			            uni.hideLoading(), uni.showModal({
			              title: "提示",
			              content: ta.msg,
			              showCancel: !1, 
			              success: function (taa) {
			                taa.confirm && o.loadOrderList(o.data.status);
			              }
			            });
			          }
			        }));
			      }
			    });
			  },
			 /*加载数据 */
			   loadOrderList: function (a,page=0) {
			     void 0 == a && (a = -1);
			     var o = this;
			     var order_list = o.order_list;
			     o.status= a; 
				 uni.showLoading({
			       title: "正在加载",
			       mask: !0
			     });
			  console.log('e的值',e);
			  console.log('a的值',);
			  let arr = this.main_getGlobal();
				 uni.request({
			       url: t.order.list,
			       data: {
			         status: o.status,
			         page:o.page,
			         limit: o.limit,
					 mobile:arr.token,
					 type:arr.type
			       }, 
			       success: function (t) {
					t=t.data;
					 console.log('t的值',t);
			         if(0 == t.code){
						 console.log('t.data的值',t.data);
			           if (page==0){
			             o.order_list=t.data.list;
			           }else{
			             o.order_list= order_list.concat(t.data.list);
			             
			           }
			           o.pay_type_list=t.data.pay_type_list;
			           o.row_count=t.data.row_count;
			         }
			         uni.getStorageSync("item");uni.removeStorageSync("item");
					 o.show_no_data_tip= 0 == o.order_list.length;
			       },
			       complete: function () {
			         uni.hideLoading();
			       }
			     });
			   },
			  
		},
	}
</script>

<style>
	/* pages/order_list/order_list.wxss */
	
	page {
	  background: #f6f7f8;
	  font-family: "Microsoft YaHei";
	  font-size: 24rpx;
	  box-sizing: border-box;
	}
	
	/* 导航栏 */
	
	.nav-container {
	  height: 90rpx;
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  background: rgba(255, 255, 255, 1);
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	}
	
	.nav-list {
	  text-align: center;
	  font-size: 28prx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	  line-height: 90rpx;
	  height: 90rpx;
	  position: relative;
	}
	
	.selected-nav {
	  color: rgba(236, 28, 36, 1);
	}
	
	.selected-nav::after {
	  content: '';
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  bottom: 0;
	  width: 54rpx;
	  height: 4rpx;
	  background: linear-gradient(0deg, rgba(255, 81, 51, 1), rgba(248, 40, 37, 1));
	}
	
	/* 商品列表 */
	
	.list-scroll {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  /* top: 90rpx; */
	  top: 5rpx;
	}
	
	.order-list {
	  background: rgba(255, 255, 255, 1);
	  margin: 20rpx auto 0;
	  padding: 0 28rpx;
	}
	
	.order-list:nth-last-of-type(1) {
	  margin-bottom: 50rpx;
	}
	
	.order-title {
	  padding: 30rpx 0;
	}
	
	.order-title-text image {
	  width: 24rpx;
	  height: 25rpx;
	  margin-right: 14rpx;
	}
	
	.order-title text {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.order-title-status {
	  font-size: 28rpx;
	  color: rgba(236, 28, 36, 1);
	}
	
	/* 商品列表 */
	
	.goods-list {
	  padding-bottom: 20rpx;
	}
	
	.goods-image {
	  width: 164rpx;
	  height: 138rpx;
	  border-radius: 6rpx;
	}
	
	.goods-image image {
	  max-height: 100%;
	}
	
	.goods-detail {
	  flex: 1;
	  height: 138rpx;
	  padding: 4rpx 0 4rpx 26rpx;
	}
	
	.goods-name {
	  height: 80rpx;
	  line-height: 40rpx;
	  font-size: 30rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.goods-price-text {
	  font-size: 22rpx;
	  color: rgba(153, 153, 153, 1);
	}
	
	.goods-price-num text:nth-of-type(1) {
	  font-size: 22rpx;
	  color: #333;
	}
	
	.goods-price-num text:nth-of-type(2) {
	  font-size: 30rpx;
	  color: #333;
	}
	
	.order-total {
	  padding: 30rpx 0;
	}
	
	.order-btn {
	  font-size:24rpx;
	  width: 138rpx;
	  height: 56rpx;
	  background: rgba(255, 255, 255, 1);
	  border: 1rpx solid rgba(199, 199, 199, 1);
	  border-radius: 28rpx;
	  text-align: center;
	  line-height: 54rpx;
	}
	
	/* .order-btn:nth-last-of-type(1) {
	  margin-left: 22rpx;
	  border: 1rpx solid rgba(236, 28, 36, 1);
	  color: rgba(236, 28, 36, 1);
	}
	
	.order-btn:nth-last-of-type(2) {
	  border: 1rpx solid rgba(220, 220, 220, 1);
	  color: rgba(102, 102, 102, 1);
	} */
	
	.order-btn-red{
	 
	  border: 1rpx solid rgba(236, 28, 36, 1);
	  color: rgba(236, 28, 36, 1);
	}
	.order-btn-gray{
	  border: 1rpx solid rgba(220, 220, 220, 1);
	  color: rgba(102, 102, 102, 1);
	}
	.mgl-22{
	   margin-left: 22rpx;
	}
	
	/* 支付方式弹窗 */
	
	.van-popup {
	  background: rgba(0, 0, 0, 0) !important;
	}
	
	.pay-container {
	  width: 610rpx;
	  background: rgba(255, 255, 255, 1);
	  border-radius: 10rpx;
	  overflow: hidden;
	}
	
	.pay-title {
	  text-align: center;
	  height: 88rpx;
	  line-height: 88rpx;
	  font-size: 30rpx;
	  color: rgba(0, 0, 0, 1);
	}
	
	.pay-list {
	  height: 86rpx;
	  padding: 0 52rpx 0 26rpx;
	  border-top: 1rpx solid #f2f2f2;
	}
	
	.pay-list-title image {
	  width: 40rpx;
	  height: 40rpx;
	  margin-right: 20rpx;
	}
	
	.pay-list-title text {
	  font-size: 30rpx;
	  color: rgba(51, 51, 51, 1);
	}
	
	.pay-list-image {
	  width: 28rpx;
	  height: 28rpx;
	}
	page {
		background-color: #fff;
		font-family: "Microsoft YaHei";
		font-size: 24rpx;
		box-sizing: border-box;
	}
	/*新增样式*/
	.flex-between {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.flex-end {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	}
</style>
